<template>
    <div class="dropDownContainer">
        <el-dropdown :style="execDropdownClass"
                     :split-button="propJson.splitButton === 'button'"
                     :size="propJson.buttonSize"
                     :type="propJson.splitButton === 'button' ? propJson.buttonType : ''"
                     :disabled="propJson.disabled"
                     :placement="propJson.placement"
                     :trigger="propJson.trigger"
                     :hideOnClick="propJson.hideOnClick"
                     :info="defaultValue"
                     :info2="dropDownValue"
                     @command="handleCommand"
                     size="large">
        <span v-if="propJson.splitButton === 'button'" :style="execButtonClass">
            {{defaultValueData}}
        </span>
            <el-button v-if="propJson.splitButton === 'span'" :type="propJson.buttonType" :style="execButtonClass"
                       :size="propJson.buttonSize" :plain="propJson.isPlain" :color="propJson.isCustomColor ? propJson.customColor : ''">
                {{defaultValueData}}&nbsp;&nbsp;
                <component is="DownOutlined" ></component>
            </el-button>

            <el-avatar v-if="propJson.splitButton === 'avatar' && propJson.avatarUrl !== ''" :size="propJson.avatarSize" :src="propJson.avatarUrl"
                       :shape="propJson.avatarShape" :fit="propJson.avatarFit" class="avatarClass"/>

            <el-avatar v-if="propJson.splitButton === 'avatar' && propJson.avatarUrl === ''" class="avatarClass">Avatar</el-avatar>

            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item v-for="item in dropDownValueList" :key="item.id"
                                      :command="item.command" :disabled="item.dropDownDisable">
                        {{item.value}}
                    </el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>

<script>
import {doThirdServiceAction, doThirdServiceValue} from "@/request/lowcode/thirdService";
import jsonpath from "jsonpath";
import {deepCopy} from "@/utils/tagCreate";
import {execCustomValue} from "@/utils/commonParamUtil";

export default {
    name: "MenuDropDownComponent",
    props: ['propJson', 'commonParam'],
    data() {
        return {
            defaultValueData: "",
            dropDownValueList: []
        }
    },
    methods: {
        execDefaultThen(resValue) {
            if (Array.isArray(resValue)) {
                this.defaultValueData = resValue[0]
            } else if (typeof resValue === "string") {
                this.defaultValueData = resValue
            }
        },
        execDefaultCatch(resValue) {

        },
        execDropDownThen(resValue) {
            this.dropDownValueList = []
            if (Array.isArray(resValue)) {
                // 构建对象
                for (let i = 0; i < resValue.length; i++) {
                    let val = resValue[i];
                    // 根据配置的jsonPath查询对应的字段数据
                    let valInfo = jsonpath.query(val, this.propJson.dropDownJsonPath)
                    let valueItem = valInfo[0];
                    valueItem = execCustomValue(this.commonParam, valueItem);
                    if (!this.propJson.commandField) {
                        let obj = {
                            command: "",
                            value: valueItem,
                            dropDownDisable: val.dropDownDisable
                        }
                        this.dropDownValueList.push(obj);
                        continue
                    }
                    let commandInfo = jsonpath.query(val, this.propJson.commandField)
                    let obj = {
                        command: commandInfo[0],
                        value: valueItem,
                        dropDownDisable: val.dropDownDisable
                    }
                    this.dropDownValueList.push(obj);
                }
            } else if (typeof resValue === "string") {
                this.dropDownValueList[0] = resValue
            }
        },
        execDropDownCatch(resValue) {

        },
        execChangeThen(awaitObj) {
            // 判断是否需要在下拉改变后重新加载页面
            if (this.propJson.isReloadPage && awaitObj.res) {
                this.$router.go(0)
            }
        },
        async handleCommand(command) {
            if (!this.propJson.isAddChangeAction) {
                return
            }
            // 构建内置变量参数
            let commandVariable = this.propJson.commandVariable
            let resList = deepCopy(this.propJson.changeAction)
            for (let i = 0; i < resList.length; i++) {
                let action = resList[i]
                if (!action.apiParamList) {
                    action.apiParamList = []
                }
                let pageIndexVariableInfo = {variableName: commandVariable, variableValue: command, type: "custom", variableType: "String", variableParamName: ""}
                action.apiParamList.push(pageIndexVariableInfo)
                // 重置routeTo中的值
                action.routeTo = command;
            }
            // 定义一个标志位，后续同步执行
            let awaitObj = {flag: false, res: true}
            await doThirdServiceAction(resList, awaitObj, this.commonParam, this.execChangeThen, ()=>{}, awaitObj);
        }
    },
    computed: {
        execDropdownClass() {
            let resStyle = "width: 100%;"
            resStyle += "height: 100%;";
            return resStyle;
        },
        execButtonClass() {
            let resStyle = "width: 100%;height: 100%;"
            if (this.propJson.editFlag) {
                resStyle += "pointer-events: none;";
            }
            return resStyle;
        },
        async defaultValue() {
            if (this.propJson.editFlag) {
                return;
            }
            await doThirdServiceValue(this.propJson.defaultActionInfo, this.commonParam, this.execDefaultThen, this.execDefaultCatch, null)
        },
        async dropDownValue() {
            if (this.propJson.editFlag) {
                return;
            }
            await doThirdServiceValue(this.propJson.actionInfo, this.commonParam, this.execDropDownThen, this.execDropDownCatch, null)
        }
    }
}
</script>

<style scoped lang="less">
.dropDownContainer {
    height: 100%;
}

.avatarClass:hover {
    cursor: pointer;
}
</style>